﻿<%@ include file="/WEB-INF/views/framework/global.jsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>课题查看</title>
</head>
<body class="kk">
	<ul class="nav nav-tabs g_navbar">
	  <li><a href="${reqRoot}/mytopic">课题管理</a></li>
	  <li><a href="${reqRoot}">我的课题</a></li>
	  <li class="active"><a href="#">${topic.name}</a></li>
	</ul>

	<div class="framework_container">
		<div class="row" >
			<div class="col-lg-2"></div>
			<div class="col-lg-8"> <h3 class="fw">${topic.name}</h3> </div>
			<div class="col-lg-2"></div>
		</div>
		<div class="row">
			<div class="col-lg-2"></div>
			<div class="col-lg-8"> 
				${topic.content} 
			</div>
			<div class="col-lg-2"></div>
		</div>
	</div><!-- /framework_container -->
	<script src="${cmpRoot}/mytopic_view.js"></script>
</body>
</html>


<%-- 
<!-- 别太在意我啊 -->
<div class="content_banner">
    <a href="http://cdc.tencent.com/?p=5677"><img src="http://cdc.tencent.com/wp-content/uploads/2012/06/bannernew.jpg" width="" height=""></a>
    <div class="text"><p>　　颜色可以用来区分信息图形上的数据类别和维度，是数据可视化中最常用的视觉变量之一。然而，世界上有<strong>超过8%的男性和0.4%的女性都被色觉障碍</strong>的问题困扰——他们在识别部分或者全部颜色时有困难。我们通常笼统的称这类人群为“色盲(Color Blindness)”（也称为道尔顿症、色觉缺失、色觉辨认障碍、色弱等）。面对如此庞大的特殊受众，设计师理应关注他们的需求。信息图形设计本是以向用户传递精准数据为目标，也不能忽视了这部分群体。<span id="more-5677"></span><br>
<strong></strong></p>
<p><strong>一. 了解色盲</strong><br>
　　“色盲能看到颜色吗？”“他们只能看到黑、白吗？”——人们常误以为色盲视觉所见的景象只有灰阶分布，其实不是的。<strong>色盲并不意味着色觉的完全丧失，而是指部分色觉受损，因此无法正确感知和分辨某些区域的颜色。</strong>色盲可以分为：红色盲（P）、绿色盲（D）、蓝色盲（T）和全色盲。其中红色盲和绿色盲最为普遍，合称为红绿色盲。全球大约2亿人都患有色盲，它的普遍程度甚至高于AB血型的人群。下面我们感性的看看色盲人眼中的世界：<br>
<img class="aligncenter size-full wp-image-5678" src="http://cdc.tencent.com/wp-content/uploads/2012/06/01.png" alt="" width="" height="">&nbsp;<img class="aligncenter size-full wp-image-5679" src="http://cdc.tencent.com/wp-content/uploads/2012/06/02.png" alt="" width="" height=""></p>
<p>　　从上面模拟色盲色觉的图片来看，我们可以感受到色盲人士能够辨识的色相较为有限。红色盲和绿色盲的色觉较为近似。由于红绿色盲人数占到了色盲总数的99%，我们需要更多地理解他们能看到的颜色。以下列举了红绿色盲容易混淆的颜色，以及色觉上的一些规律：</p>
<p>&nbsp;　　1 ) 红绿色盲难以分辨两种差别只在红色或绿色元素的颜色。如红色和绿色；蓝色和紫色（蓝+红）；绿色和棕色；红色和棕色等。</p>
<p>　　2 ) 红绿色盲人士对蓝色更为敏感。举例来说，他们会把红色和绿色、或黄色和黄绿色混淆，但却能清楚的分辨绿色和蓝绿色（翠绿色）。</p>
<p>　　3 ) 红绿色盲眼中的<span style="color: #ff0000">红色</span>并不是一种明亮醒目的颜色。相反红色对他们来说显得非常深，而暗红色则几乎接近黑色。因此色盲人士很难分辨出文章内的<span style="color: #993300">深红色强调字</span>。</p>
<p>　　4 ) 虽然色盲人士对色相的辨识能力较弱，但却对明度、饱和度非常敏感。</p>
<p>　　5 ) 相比高饱和度的颜色，低饱和度的颜色更难辨认。如天蓝色和粉红色。</p>
<p>&nbsp;<img class="aligncenter size-full wp-image-5680" src="http://cdc.tencent.com/wp-content/uploads/2012/06/03.png" alt="" width="" height=""></p>
<p>　　也许以上的分析还是太抽象，为了更直观的看到色盲人士眼中的颜色，下面介绍几种模拟色盲色觉的工具，方便设计师们设计和检验：</p>
<p><strong>Adobe自带的校样设置</strong></p>
<p>　　Photoshop CS4和Illustrator CS4及以上版本提供了模拟红色盲和绿色盲的校样设置，对于每天都在Photoshop/Illustrator中拼搏的视觉设计师来说，这是最简便的一种方法了。选择“视图—校样设置—红色盲型/绿色盲型”</p>
<p><strong>&nbsp;Color Oracle：</strong><a href="http://colororacle.org/">http://colororacle.org/</a></p>
<p>&nbsp;<strong>网站Color Blind Web Page Filter：</strong><a href="http://colorfilter.wickline.org/">http://colorfilter.wickline.org/</a></p>
<p>&nbsp;</p>
<p><strong>二.设计解决方案</strong></p>
<p>　　设计面向色盲人士友好的信息图形，并不意味着要设计师要放弃使用色彩这种“利器”。即便是对色觉障碍的人士来说，颜色依然是区分不同类数据的一种简单快速的表现形式。要提高信息图形的识别性和易读性，我们可以遵循这样几个思路寻找解决方案：（1）不完全依赖颜色来区分信息，同时使用多种视觉变量来编码信息；（2）选择安全的配色方案；（3）使用文字注解。</p>
<p><strong>1.冗余编码</strong></p>
<p>　　避免仅使用颜色来编码信息，应尽量同时<strong>使用多种视觉变量（如形状+颜色、尺寸+颜色、注释+颜色）来对信息编码</strong>。其中，形状包括了这样一些可使用的元素：圆形、三角形、矩形等；实线、虚线、点线等；字母、数字符号等。这里需遵循的一个原则是：<strong>使用尽可能少的颜色——结合使用不同形状符号和少量鲜艳的颜色</strong>，效果远好于只使用一种形状和多种颜色。</p>
<p>&nbsp;<img class="aligncenter size-full wp-image-5681" src="http://cdc.tencent.com/wp-content/uploads/2012/06/04.png" alt="" width="" height=""></p>
<p>&nbsp;<br>
<strong>2.选择适当的配色</strong><br>
　　针对色盲人士的颜色识别能力，需要精心选择配色，才能避免选择容易混淆的色区。然而，要使配色能覆盖到各种色觉辨认能力的人（包括色盲、色弱和色觉正常的人群）并不是一件容易的事，尤其同一界面需要出现多种颜色时，让设计师非常头疼。日本有研究得出一组<strong>无障碍配色建议</strong>，在此分享，供大家参考。这组颜色针对色盲和非色盲人士都是易辨识的（例如它选择了朱红色代替红色，蓝绿色代替绿色，紫红色代替紫色，以减少色盲人士的困扰），它对屏显和印刷都适用，并且所有颜色的名称也容易定义。</p>
<p><img class="aligncenter size-full wp-image-5682" src="http://cdc.tencent.com/wp-content/uploads/2012/06/05.png" alt="" width="" height="">&nbsp;</p>
<p>　　需要注意的是，从以上配色组中选取颜色时：A. 请交替使用暖色和冷色；B. 当使用多个暖色和多个冷色时，在明度和饱和度上做出区别； C. 避免同时使用低饱和度和低明度的组合。<br>
　　另外分享两个配色工具，它们都提供了针对色盲人士配色的选项，可以辅助大家进行配色：<br>
　　网站CONTRAST-A-WEB V2.0　<a href="http://www.dasplankton.de/ContrastA/">http://www.dasplankton.de/ContrastA/</a>（打开“show color deficiency simulation”面板）<br>
　　地图配色工具COLOR BREWER 2.0 <a href="http://colorbrewer2.org/">http://colorbrewer2.org/</a>（勾选“colorblind safe”选项）</p>
<p>&nbsp;<br>
<strong></strong></p>
<p><strong>三、举例</strong></p>
<p>　　下面以几种常用信息图形为例，来说明如何为色盲用户优化信息图：</p>
<p>1)点状图</p>
<p>&nbsp;<img class="aligncenter size-full wp-image-5683" src="http://cdc.tencent.com/wp-content/uploads/2012/06/06.png" alt="" width="" height=""></p>
<p>　　优化采用了这样一些手段：A.调整配色，将色盲人士容易混淆的红、绿、橙色换为红、蓝、黄色。B.调整明度，使图中几个颜色在明度上差异更明显。C.为不同元素赋予不同形状。所有使用点元素的信息图，都可以参考这种解决方式。</p>
<p>2)折线图</p>
<p>&nbsp;<img class="aligncenter size-full wp-image-5684" src="http://cdc.tencent.com/wp-content/uploads/2012/06/07.png" alt="" width="" height=""></p>
<p>　　优化采用了这样一些手段：A.采用更粗的线条，使颜色更明显。（色块越小，颜色越难分辨。对有色觉障碍的人来说，带颜色的细线、小图标、细体文字尤其难区分。）B.换用不同形状的线条（实线、虚线、点线）。C.文字直接注释在线的周围。D.颜色微调。这样对每一类数据使用多重可视化变量进行编码后，即便颜色信息完全丢失，也能够完整的传递信息。所有使用线元素的信息图，都可以参考这种解决方式。</p>
<p>3)柱状图</p>
<p>&nbsp;<img class="aligncenter size-full wp-image-5685" src="http://cdc.tencent.com/wp-content/uploads/2012/06/08.png" alt="" width="" height=""></p>
<p>　　通过增加底纹，直接标注文字注释的方式优化了柱状图。所有使用面的图形（如饼图），都可以参考这种解决方式。</p>
<p>&nbsp;</p>
<p><strong>四.写在最后</strong></p>
<p>　　在实际设计过程中，我们不一定会同时使用到以上所有手段，需要在<strong>美观和友好之间进行权衡</strong>。我们也可以采用一些<strong>交互</strong>手段，避免同一界面中元素太多太过杂乱的问题。如highcharts这个趋势图非常优秀，它采用了易辨识的颜色，每个节点处都使用了不同形状的符号，然而仅当鼠标hover到具体节点时，会出现该条线对应的信息（“New York”）。</p>
<p>&nbsp;<img class="aligncenter size-full wp-image-5686" src="http://cdc.tencent.com/wp-content/uploads/2012/06/09highchart.png" alt="" width="" height=""></p>
<p>　　另外除了鼠标hover的交互方式以外，我们甚至也可以为色盲人士提供单独的色盲模式切换，这样也可以兼顾视觉上的美观，避免了太多信息的干扰。这种形式在游戏和软件中也有先例。例如iChat，一般情况下仅有不同颜色来区别用户的在线状态，但同时，它也提供了“User shapes to indicate status”选项，可以将“空闲”状态换成橙黄色三角形符号，将“忙”状态换成红色方形符号表示。</p>
<p>&nbsp;<img class="aligncenter size-full wp-image-5687" src="http://cdc.tencent.com/wp-content/uploads/2012/06/10ichat.png" alt="" width="" height=""></p>
<p>&nbsp;</p>
<p>参考资料：</p>
<p>We are colorblind <a href="http://wearecolorblind.com/">http://wearecolorblind.com/</a></p>
<p>Designing For, and As, a Color-Blind Person <a href="http://webdesign.tutsplus.com/articles/design-theory/designing-for-and-as-a-color-blind-person/">http://webdesign.tutsplus.com/articles/design-theory/designing-for-and-as-a-color-blind-person/</a></p>
<p>Color Universal Design (CUD)- How to make figures and presentations that are friendly to Colorblind people <a href="http://jfly.iam.u-tokyo.ac.jp/color/">http://jfly.iam.u-tokyo.ac.jp/color/</a></p>
<p>Designing maps for the colour-vision impaired <a href="http://colororacle.org/design.html">http://colororacle.org/design.html</a></p>
<p>设计同理心——关注色盲人群<a href="http://lovelyrosa.blogbus.com/logs/54856107.html">http://lovelyrosa.blogbus.com/logs/54856107.html</a></p>
<p>Web Accessibility之为色盲设计<a href="http://www.2beusable.com/web-accessibility-1-what-is-color-blindness.html">http://www.2beusable.com/web-accessibility-1-what-is-color-blindness.html</a></p>
</div>
	
    <!--appendInfo-->
    <div class="appendInfo">
    <ul>
    <li class="come_from">(<span>本文出自Tencent CDC Blog，转载时请注明出处</span>)</li>
    <li class="red_heart" id="red_heart">90</li>
    <li class="add_like"><a href="javascript:cdcAjax('http://cdc.tencent.com/data/ajax/add_post_score.php?p=5677',add_post_score)">给好文加心！</a></li>
    <li class="share" onmouseover="share_more(5677,this);"><a href="javascript:;">分享到...</a></li>
    </ul>
    <div class="lr"><span class="left">&lt; <a href="http://cdc.tencent.com/?p=5641" rel="prev">超平面的触觉设计</a></span> <span class="right"><a href="http://cdc.tencent.com/?p=5690" rel="next">用户访谈心得总结</a> &gt;</span></div>
    </div>
    <script type="text/javascript">function add_post_score(ret){ret=ret.split("|");document.getElementById("red_heart").innerHTML = ret[0];if(ret[1]!=null)alert(ret[1]);}</script>
    </div>
<!-- 别太在意我啊 -->
--%>